<script setup lang="ts">
import {messageStore, UserType} from "../store";
import {onUnmounted} from "vue";
import axios from 'axios';
// const currentInstance: any = getCurrentInstance()
// const { $axios } = currentInstance.appContext.config.globalProperties
const dayList: string[] = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT']

const store = messageStore()
const userInfo = store.getUserInfo()


let wheelToTop: number = 0;
const mouseWheel = (event: WheelEvent) => {
  const delta: number = event.deltaY
  const avatar = document.querySelector('.content .avatar') as HTMLElement
  const textContent = document.querySelector('.content .textContent') as HTMLElement
  const time = document.querySelector('.time h1') as HTMLElement
  if (delta < 0 && wheelToTop == 0) {
    avatar.style.marginTop = '-40%'
    avatar.style.transform = 'scale(0.5)'
    textContent.style.top = '20%'
    time.style.opacity = '0'
    wheelToTop = 1
  } else if (delta > 0 && wheelToTop == 1) {
    avatar.style.marginTop = '0'
    avatar.style.transform = 'scale(1)'
    avatar.style.transform = ''
    textContent.style.top = '70%'
    time.style.opacity = '1'
    wheelToTop = 0
  }

}

let dragging: boolean = false
let startX: number = 0
let isShowInfo: boolean = false
const handleMouseDown = (event: MouseEvent) => {
  if (event.button === 0) {
    dragging = true
    startX = event.clientX
  }
}

const handleMouseMove = (event: MouseEvent) => {
  const infoDiv = document.querySelector('.textContent .cardBox .info') as HTMLElement
  if (dragging) {
    let currentX: number = event.clientX;
    if (currentX - startX < -30 && !isShowInfo) {
      infoDiv.style.left = '28vw'
      isShowInfo = true
    } else if (currentX - startX > 30 && isShowInfo) {
      isShowInfo = false
      infoDiv.style.left = '150vw'
    }
  }
}


onUnmounted(() => {
  const infoDiv = document.querySelector('.textContent .cardBox .info') as HTMLElement
  infoDiv.style.left = '150vw'
  isShowInfo = false
  hideDetailOptions()
})
const handleMouseUp = () => {
  dragging = false
}


const showDetailOptions = () => {
  const optionDiv = document.querySelector('.infoOption') as HTMLElement
  optionDiv.style.top = '0'
}

const hideDetailOptions = () => {
  const optionDiv = document.querySelector('.infoOption') as HTMLElement
  optionDiv.style.top = '100vh'
}

const prevent = (event: Event) => {
  event.stopPropagation()
}


const testApi = async () => {
  try {
    const res = await axios.post(import.meta.env.VITE_BACKEND_HOST + '/test/mo', {
      id: 9,
      userType: UserType.UserRoom
    });
    console.log(res.data);
  } catch (e) {
    console.log(e);
  }
}
</script>

<template>
  <div id="personalMain" @wheel="mouseWheel">
    <div class="content">
      <div class="time">
        <h1>{{ store.getDate.year }}-{{ store.getDate.month + 1 }}-{{ store.getDate.date }}
          {{ store.getDate.hours }}:{{ store.getDate.minutes }} {{ dayList[store.getDate.day] }}</h1>
      </div>

      <div class="avatar">
        <img :src="userInfo.avatar" alt="avatar">
      </div>
      <div class="textContent">
        <h1 class="title">Welcome back, {{ userInfo.name }}</h1>
        <div
            @mousedown="handleMouseDown"
            @mousemove="handleMouseMove"
            @mouseup="handleMouseUp"
            class="cardBox"
        >
          <div class="card">
            <div class="mask">Replace image</div>
          </div>
          <div class="card">
            <div class="mask">Replace image</div>
          </div>
          <div class="card">
            <div class="mask">Replace image</div>
          </div>
          <div class="info">
            <div class="intro">{{ userInfo.name }}'s brief introduction</div>
            <div class="intro" style="height: 40%">{{ userInfo.intro }}</div>
            <div class="intro" style="height: 40%; flex-direction: row">
              <div class="gender detailIcon">
                <svg style="color: rgba(41, 111, 239, 1);" v-if="userInfo.gender" xmlns="http://www.w3.org/2000/svg"
                     width="30" height="30" fill="currentColor" class="bi bi-gender-male" viewBox="0 0 16 16">
                  <path fill-rule="evenodd"
                        d="M9.5 2a.5.5 0 0 1 0-1h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V2.707L9.871 6.836a5 5 0 1 1-.707-.707L13.293 2H9.5zM6 6a4 4 0 1 0 0 8 4 4 0 0 0 0-8z"/>
                </svg>
                <svg style="color: #fa3b56;" v-else xmlns="http://www.w3.org/2000/svg" width="30" height="30"
                     fill="currentColor" class="bi bi-gender-female" viewBox="0 0 16 16">
                  <path fill-rule="evenodd"
                        d="M8 1a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM3 5a5 5 0 1 1 5.5 4.975V12h2a.5.5 0 0 1 0 1h-2v2.5a.5.5 0 0 1-1 0V13h-2a.5.5 0 0 1 0-1h2V9.975A5 5 0 0 1 3 5z"/>
                </svg>
              </div>
              <div class="location row-center detailIcon" @click="testApi">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-geo-alt"
                     viewBox="0 0 16 16">
                  <path
                      d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A31.493 31.493 0 0 1 8 14.58a31.481 31.481 0 0 1-2.206-2.57c-.726-.95-1.436-2.008-1.96-3.07C3.304 7.867 3 6.862 3 6a5 5 0 0 1 10 0c0 .862-.305 1.867-.834 2.94zM8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10z"/>
                  <path d="M8 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
                </svg>
                <div>Unknown</div>
              </div>
              <div class="id row-center detailIcon">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-at"
                     viewBox="0 0 16 16">
                  <path
                      d="M13.106 7.222c0-2.967-2.249-5.032-5.482-5.032-3.35 0-5.646 2.318-5.646 5.702 0 3.493 2.235 5.708 5.762 5.708.862 0 1.689-.123 2.304-.335v-.862c-.43.199-1.354.328-2.29.328-2.926 0-4.813-1.88-4.813-4.798 0-2.844 1.921-4.881 4.594-4.881 2.735 0 4.608 1.688 4.608 4.156 0 1.682-.554 2.769-1.416 2.769-.492 0-.772-.28-.772-.76V5.206H8.923v.834h-.11c-.266-.595-.881-.964-1.6-.964-1.4 0-2.378 1.162-2.378 2.823 0 1.737.957 2.906 2.379 2.906.8 0 1.415-.39 1.709-1.087h.11c.081.67.703 1.148 1.503 1.148 1.572 0 2.57-1.415 2.57-3.643zm-7.177.704c0-1.197.54-1.907 1.456-1.907.93 0 1.524.738 1.524 1.907S8.308 9.84 7.371 9.84c-.895 0-1.442-.725-1.442-1.914z"/>
                </svg>
                <div>{{ userInfo.id }}</div>
              </div>
              <div class="option detailIcon" @click="showDetailOptions">
                <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor"
                     class="bi bi-person-gear" viewBox="0 0 16 16">
                  <path fill-rule="evenodd" d="M11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"/>
                  <path
                      d="M8.256 14a4.474 4.474 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10c.26 0 .507.009.74.025.226-.341.496-.65.804-.918C9.077 9.038 8.564 9 8 9c-5 0-6 3-6 4s1 1 1 1h5.256Z"/>
                  <path fill-rule="evenodd"
                        d="M11.886 9.46c.18-.613 1.048-.613 1.229 0l.043.148a.64.64 0 0 0 .921.382l.136-.074c.561-.306 1.175.308.87.869l-.075.136a.64.64 0 0 0 .382.92l.149.045c.612.18.612 1.048 0 1.229l-.15.043a.64.64 0 0 0-.38.921l.074.136c.305.561-.309 1.175-.87.87l-.136-.075a.64.64 0 0 0-.92.382l-.045.149c-.18.612-1.048.612-1.229 0l-.043-.15a.64.64 0 0 0-.921-.38l-.136.074c-.561.305-1.175-.309-.87-.87l.075-.136a.64.64 0 0 0-.382-.92l-.148-.045c-.613-.18-.613-1.048 0-1.229l.148-.043a.64.64 0 0 0 .382-.921l-.074-.136c-.306-.561.308-1.175.869-.87l.136.075a.64.64 0 0 0 .92-.382l.045-.148ZM14 12.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z"/>
                </svg>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="infoOption row-center" @click="hideDetailOptions">
      <div class="dialog colum-center" @click="prevent">
        <div>
          <label></label>
          <input type="text">
        </div>
        <div>
          <label></label>
          <select>
            <option>男</option>
            <option>女</option>
          </select>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.row-center {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.colum-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#personalMain {
  background-color: var(--mian-view-bg);
  width: calc(100% - 60px);
  height: 100%;
  color: var(--color-font);

  .infoOption {
    height: 100vh;
    width: 100vw;
    position: absolute;
    left: 0;
    top: 100vh;
    z-index: 10;
    backdrop-filter: blur(30px);
    transition: all 0.7s ease;

    .dialog {
      width: 300px;
      height: 300px;
      background-color: var(--dailog-bg);
      opacity: 0.3;
      backdrop-filter: blur(20px);
      border-radius: 10px;
    }
  }


  .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;

    height: 100%;
    width: 100%;
    position: relative;


    .time {
      position: absolute;
      top: 20px;
    }

    .textContent {
      position: absolute;
      height: 100%;
      width: 100%;
      top: 70%;
      display: flex;
      flex-direction: column;
      align-items: center;


      background: linear-gradient(to top, #fa3b56, rgba(0, 0, 0, 0));

      .cardBox {
        padding: 40px 15vw 40px 30vw;
        height: 100%;
        width: 100%;
        display: flex;
        position: absolute;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        top: 30%;

        .info {
          box-sizing: border-box;
          height: 41vh;
          width: 84vw;
          position: absolute;
          background-color: rgba(255, 255, 255, 0.2);
          backdrop-filter: blur(25px);
          z-index: 4;
          color: black;
          border-radius: 1vw;
          box-shadow: rgba(0, 0, 0, 0.2) 5px 5px;
          transition: all 1s ease;
          left: 150vw;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: center;
          padding: 20px;

          .intro:first-child {
            font-size: 30px;
          }

          .intro:nth-child(2) {
            &:hover {
              transform: scale(1.5);
            }
          }

          .intro {
            width: 100%;
            display: flex;
            height: 20%;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .detailIcon {
              margin-right: 6vw;
              margin-left: 6vw;
              font-size: 20px;

              &:hover {
                transform: scale(1.5);
              }
            }
          }

        }

        .card:nth-child(2) {
          &::before {
            background-image: url("../assets/img/vida.jpg");
          }

          width: 40vw;
        }

        .card:nth-child(3) {
          &::before {
            background-image: url("../assets/img/miku.jpg");
          }

          width: 25vw;
        }

        .card {
          margin: 4px;
          position: relative;
          border-radius: 10px;
          background-color: rgba(0, 0, 0, 0);
          height: 40vh;
          width: 15vw;

          .mask {
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            top: 3px;
            left: 3px;
            border-radius: 10px;
            height: calc(100% - 6px);
            width: calc(100% - 6px);
            z-index: 3;
            font-size: 1em;


            opacity: 0;
            backdrop-filter: blur(6px);
            color: black;

            &:hover {
              opacity: 1;
            }
          }

          &::before {
            content: '';
            position: absolute;
            top: 3px;
            left: 3px;
            width: calc(100% - 6px);
            height: calc(100% - 6px);
            background-image: url("../assets/img/06.jpg");
            background-repeat: no-repeat;
            background-size: cover;
            border-radius: 10px;
            z-index: 2;
          }

          &::after {
            content: '';
            position: absolute;
            top: -100%;
            left: -100%;
            width: 300%;
            height: 300%;
            background: conic-gradient(
                rgba(0, 0, 0, 0),
                rgba(41, 111, 239, 1),
                #eaa851,
                rgba(0, 0, 0, 0)
            );
            animation: rotate 2s linear infinite;
            border-radius: 10px;
            z-index: 1;
          }
        }

      }

      .title {
        color: var(--color-font);
        position: absolute;
        top: 20%;
      }
    }


    .avatar {
      display: flex;
      justify-content: center;
      z-index: 1;
      align-items: center;
      flex-direction: row;
      height: 250px;
      width: 250px;
      border-radius: 50%;

      &::before {
        height: 270px;
        z-index: 1;
        width: 270px;
        position: absolute;
        border-radius: 50%;
        content: "";
        animation: rotate 1s linear infinite;
        filter: blur(5px);
        background: conic-gradient(
            #eaa851,
            #fa3b56,
            rgba(41, 111, 239, 1),
            #eaa851
        );
      }

      &::after {
        content: "Change Avatar";
        position: absolute;
        z-index: 3;
        height: 250px;
        font-size: 2em;
        width: 250px;
        color: black;
        line-height: 250px;
        text-align: center;
        opacity: 0;
        transition: all 0.5s ease;
      }

      &:hover::after {
        display: inline-block;
        backdrop-filter: blur(3px);
        border-radius: 50%;
        opacity: 1;
        background-color: rgba(255, 255, 255, 0.5);
        z-index: 3;
      }

      img {
        z-index: 2;
        border-radius: 50%;
        height: calc(100% - 6px);
        width: calc(100% - 6px);

      }
    }
  }
}
</style>